<template>
	<view class="catalogue-card" ref="catalogueRef" :style="{ backgroundColor: comStore.pageColor}">
		<view class="catalogue-title" :style="{color:comStore.fontColor}">
			{{ textLayoutStore.bookName }}
		</view>
		<view class="catalogue-head" :style="{color:comStore.fontColor}">
			<view :class="{active: tabIndex === 0}" @click="tabIndex = 0">目录</view>
			<view :class="{active: tabIndex === 1}" @click="tabIndex = 1">书签</view>
		</view>
		<view class="catalogue-content">
			<view class="catalogue-one-box" 
				v-for="(chapter, index) in textLayoutStore.chapters" 
				v-show="tabIndex === 0"
				:key="index"
				:class="{ 'active-chapter': index === textLayoutStore.currentChapter }"
				@click="handleChapterClick(index)"
				:style="{color:comStore.fontColor}">
				{{ chapter.title }}
			</view>
			<view class="catalogue-two-box" v-for="item in pagelist" v-show="tabIndex==1" :key="item.data">
				<view class="page-text">
					{{item.text}}
				</view>
				<view class="page-box">
					<view style="margin-left: 10px;">{{item.progress}}%</view>
					<view style="margin-right: 10px;">{{item.data}} {{item.time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue';
	import { useNovelStore } from '../../common/novel/novel.js';
	import { useTextLayoutStore } from '../../common/novel/textLayout.js';
	import {
		useComStore
	} from '../../common/common.js'
	
	// 初始化 store
	const store = useNovelStore();
	const textLayoutStore = useTextLayoutStore();
	const comStore = useComStore();
	
	const tabIndex = ref(0);
	const pagelist = ref([
	  {
	    text: "6报考和打印报考和打印证书报考和打印证书报考和wd打印证书报考和打印证书报考和打印证书证书，摸摸鱼",
	    data: "2000/01/10",
	    time: "12:32:03",
	    progress: "28.21"
	  },
	  {
	    text: "7-9刷面试题，找实习",
	    data: "2020/04/12",
	    time: "12:32:03",
	    progress: "28.21"
	  },
	  {
	    text: "10-12准备考虑高级和3级证书",
	    data: "2240/05/13",
	    time: "12:32:03",
	    progress: "28.21"
	  }
	]);
	
	// 点击章节处理
	const handleChapterClick = (index) => {
		textLayoutStore.jumpToChapter(index);
		store.shutall(); // 关闭目录
	};
		
	// 点击事件处理
	const handleGlobalClick = (event) => {
	  const catalogueElement = catalogueRef.value;
	  if (catalogueElement && !catalogueElement.contains(event.target)) {
	    store.shutall();
	  }
	};
	
	// 生命周期钩子
	onMounted(() => {
	  // console.log('组件挂载');
	});
	
	onUnmounted(() => {
	  // console.log('组件卸载');
	  document.removeEventListener('click', handleGlobalClick);
	});
	
	// 页面显示时（相当于 Vue2 的 onShow）
	onActivated(() => {
	  document.addEventListener('click', handleGlobalClick);
	});
	
	// 页面隐藏时（相当于 Vue2 的 onHide）
	onDeactivated(() => {
	  document.removeEventListener('click', handleGlobalClick);
	});
</script>

<style lang="scss">
	@import '/common/novel/novel.scss';
	
	.catalogue-card {
		position: fixed;
		left: 0;
		top: 0;
		width: 82vw;
		height: 100vh;
		// background-color: var(--page-color);

		.catalogue-title {
			height: 36px;
			font-size: 18px;
			margin: 40px 0 0 25px;
		}

		.catalogue-head {
			width: 100%;
			height: 100px;
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				font-size: 14px;
				margin: 30px;
			}

			.active {
				color: red;
				border-bottom: 2px solid red;
			}
		}

		.catalogue-content {
			width: 100%;
			height: calc(100vh - 170px);
			overflow-y: auto;

			.catalogue-one-box {
				width: 80%;
				height: 50px;
				margin-left: 25px;
				font-size: 14px;
				display: flex;
				align-items: center;
				position: relative;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				cursor: pointer;

				&.active-chapter {
					color: red;
				}
			}

			.catalogue-one-box::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 90%;
				height: 1px;
				// background-color: var(--font-color);
				// background-color: #fff;
				transform: scaleY(0.2);
				transform-origin: bottom;
			}

			.catalogue-two-box {
				width: 100%;
				height: 100px;
				margin-left: 25px;
				position: relative;

				.page-text {
					width: 90%;
					height: 50px;
					padding: 10px;
					font-size: 16px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.page-box {
					width: 100%;
					min-height: 20px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						width: 40%;
						font-size: 16px;
						color: var(--font-color);
					}
				}
			}

			.catalogue-two-box::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 90%;
				height: 1px;
				background-color: var(--font-color);
				transform: scaleY(0.1);
				transform-origin: bottom;
			}
		}
	}
</style>